// JavaScript Document
/* PROJECT : Aplay Menues
*	@require MyClass.js
*	@require MyUtils.js
*	@autor: Mauricio Sanchez
*	@create: 31-07-2009
*	Menu del tipo TAB con contenido dinamico
*/

TabMenu = new MyClass({
	CLASS_NAME: "TabMenu",	

	 /**  
     * Property: name
	 * 	 Nombre del TabMenu.
     * {String}
     */
	 name: '',
	 
	 /**  
     * Property: height
	 * 	 Altura del TabMenu.
     * {String}
     */
	 height: '300px',
	 
	 /**  
     * Property: width
	 * 	 Ancho del TabMenu.
     * {String}
     */
	 width: '100%',
	 
	 /**  
     * Property: contentId
	 * 	 Id del Elemento DIV donde se especifica el contenido del MiniMenu.
     * {String}
     */
	 contentId: '',
	 
	 /**  
     * Property: class
	 * 	 Clase del TabMenu.
     * {String}
     */
	 className: 'basictab',
	 
	 /**  
     * Property: tabSelected
	 * 	 Numero de TAB seleccionada actualmente (-1 si no se quiere ninguna seleccion por default).
     * {Integer}
     */
	 tabSelected: -1,
	 
	 /**  
     * Property: _container
	 * 	 Elemento DIV donde se imprime el menu.
     * {DOMELEMENT}
     */
	 container: null,
	 
	 /**  
     * Property: onOverType
	 * 	 El contenido se muestra cuando el mouse pasa sobre el tab.
     * {boolean}
     */
	 onOverType: false,
	 
	 /**  
     * Property: onClickType
	 * 	 El contenido se muestra cuando se hace click sobre el tab.
     * {boolean}
     */
	 onClickType: true,
	  
	 /**  
     * Propertyes: 
	 * 	 Elementos DOMELEMENT que componen el TabMenu.
     * {DOMELEMENT}
     */
	 _tabUL: null, //UL que representa los botones de las pestañas.	 
	 
	 /**  
     * Property: _tabs
	 * 	 Array con los elementos DOM que representan el boton de cada tab.
     * {Array[DOMELEMENT]} - Array('a')
     */
	 _tabs: null,
	 
	 /**  
     * Property: _contentTabs
	 * 	 Array con los elementos DOM que representan el contenido de cada tab.
     * {Array[DOMELEMENT]} - Array('Div')
     */
	 _contentTabs: null,
	 
	 /**  
     * Property: _scrollZone
	 * 	 Div donde se agregan los tab containers.
     * {DOMELEMENT} - Div
     */
	 _scrollZone: null,
	 
	/** 
     * Method: init
     */
	init: function(opciones){
		for (var key in opciones) {
			this[key] = opciones[key]; 
		}
		this._tabs=new Array();
		this._contentTabs=new Array();
		//cargar el container
		if (this.container==null)
			this.container = document.getElementById(this.contentId);
		this.container.style.width = this.width;
		this.container.style.height = this.height;	
		if (this.container==null)
			alert('ERROR en TabMenu.js: No se pudo encontrar el div contenedor segun el id especificado.');
		this.container.innerHTML = "";
		this.container.className = this.className;
		with (this.container.style){
			width = this.width;
			height = this.height;
		}
		
		//crear la UL para almacenar las pestañas.
		this._tabUL = document.createElement('ul');
		this.container.appendChild(this._tabUL);
		
		this._scrollZone = document.createElement('div')
		this._scrollZone.className = 'scrollZone';
		with(this._scrollZone.style){
			height = '100%';
			width = '100%';
			overflow = 'auto';
		}
		this.container.appendChild(this._scrollZone);				
	},
	
	/** 
     * Method: getHeight
     * 	 Retorna la altura en pixeles del TabMenu.
	 * Return:
	 *	{Integer}
     */
	getHeight: function(){
		return parseInt(this.height);	
	},
	
	/** 
     * Method: getWidth
     * 	 Retorna el ancho en pixeles del TabMenu.
	 * Return:
	 *	{Integer}
     */
	getWidth: function(){
		return parseInt(this.width);	
	},
	
	/** 
     * Method: addTab
     * 	 Crea y agrega un tab al menu.
	 * Params ({options}):
	 *  name - {String} : Nombre de la seccion o tab.
	 *  [rel] - {String | DomElement} : Id o DomElement del div que se quiere mostrar al hacer click o pasar sobre el tab.
	 *  [href] - {String} : Url a donde se quiere redirigir al hacer click o pasar sobre el tab.
	 *  [onClick] - {String | Function} : Nombre de la funcion o metodo a evaluar al hacer click o pasar sobre el tab.
	 *  [info] - {String} : Informacion sobre el boton (se muestra como un atributo 'title')
     */
	addTab: function(opciones){
		//opciones
		var tabNumber = this._contentTabs.length;
		var params = { Name: 'unknow TAB',
					   Rel: null,
					   Href: null,	
					   OnClick: null,					   
					   Info: null
					 };
		for (var key in opciones) {
			params[key] = opciones[key]; 
		}		
		var me = this;
		var li = document.createElement('li');
		var a = document.createElement('a');
		this._tabs.push(a);
		li.appendChild(a);
		a.innerHTML = params['name'];
		
		var onMouseClick = null;
		var onMouseOver = null;
		
		if (params['rel']!=null){
			var content = params['rel'];
			if (typeof(content)=='string')
				content = document.getElementById(params['rel']);			
			this._contentTabs.push(content);
			this.hideTabNumber(tabNumber);
			this._scrollZone.appendChild(content);
			if (this.onClickType)
				onMouseClick = function(){	
					me.showTabNumber(tabNumber);
				}
			if (this.onOverType)
				onMouseOver = function(){	
					me.showTabNumber(tabNumber);
				}
		}
		else
			this._contentTabs.push(null);
		
		if (params['onClick']!=null){
			a.style.cursor = "pointer";
			onMouseClick = function(){	
				if (this.onClickType)
					me.showTabNumber(tabNumber);
				try{
					params['onClickFunction']();							
				}
				catch(e){
					try{
						eval(params['onClickFunction']);
					}
					catch(e2){
						alert('TabMenu.js :: Funcion o llamada a funcion desconocida en el tab "'+params['classButton']+'"');
					}
				}
			};
			a.onclick = onMouseClick;
		}
		
		if (onMouseClick!=null)
			a.onclick = onMouseClick;
		if (onMouseOver!=null)
			a.onmouseover = onMouseOver;	
		
		if (params['href']!=null)
			a.href = params['href'];
		
		if (params['info']!=null)
			a.title = params['info'];	
		
		this._tabUL.appendChild(li);
		
		if (this.tabSelected==tabNumber){			
			if (onMouseClick!=null)
				a.onclick();
			if (onMouseOver!=null)
				a.onmouseover();
		}
	},
			
	/** 
     * Method: showTabNumber
     * 	 Muestraun tab segun su posicion.
	 * Params:
	 *	 tabNumber - {Integer}
     */
	showTabNumber: function(tabNumber){
		this.hideTabNumber(this.tabSelected);
		this.tabSelected = tabNumber;
		var contentTab = this._contentTabs[tabNumber];
		if (contentTab!=null)
			contentTab.style.display = "block";
		var a = this._tabs[tabNumber];
		if (a!=null)
			a.className = "activeTab";
	},
	
	/** 
     * Method: hideTabNumber
     * 	 Oculta un tab segun su posicion.
	 * Params:
	 *	 tabNumber - {Integer}
     */
	hideTabNumber: function(tabNumber){
		var contentTab = this._contentTabs[tabNumber];
		if (contentTab!=null)
			contentTab.style.display = "none";
		var a = this._tabs[tabNumber];
		if (a!=null)
			a.className = "";
	}
	
});